<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <!--  标题行    -->
      <el-row :gutter="20" style="margin: 0px -50px 0px 5px;">
        <el-col :span="21"><h1 class="my-heading">关联资料</h1></el-col>
        <el-col :span="1.5"><el-button @click="uploadSysFileSubmit">保存</el-button></el-col>
        <el-col :span="1.5"><el-button @click="goBack">返回</el-button></el-col>
      </el-row>
      <!--    条件行   -->
      <el-row v-show="showSearch" :gutter="24">
        <el-col :span="16">
          <el-card style="margin: 0 10px 20px 20px">
            <el-form :model="dataList" ref="queryRef"  @keyup.enter="getDataList">
              <el-row :gutter="24">
                <el-col :span="6" class="mb20">
                  <el-form-item label="参与组织" prop="studyGroup" :rules="[{ required: true, message: '请选择组织名称',trigger: 'change',}]">
                    <el-tree-select v-model="state.queryForm.studyGroup" disabled  :data="options1" :props="{ value: 'id', label: 'name', children: 'children' }"
                    @current-change="treeHandleChange" clearable check-strictly :render-after-expand="false" placeholder="请选择"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="mb20">
                  <el-form-item label="参与岗位" prop="studyPost" :rules="[{ required: true, message: '请选择岗位名称',trigger: 'change',}]">
                    <el-select v-model="state.queryForm.studyPost" disabled multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                      <el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postName"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="mb20">
                  <el-form-item label="专业名称" prop="majorName" :rules="[{ required: true, message: '请选择专业名称',trigger: 'change',}]">
                    <el-select v-model="state.queryForm.majorName" disabled filterable :required="true" @change="getProfessionalGrade">
                      <el-option v-for="item in options2"  :key="item.zymcId" :label="item.zymcName" :value="item.zymcName"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="mb20">
                  <el-form-item label="关键点" prop="keyPoint" :rules="[{ required: true, message: '请选择关键点',trigger: 'change',}]">
                    <el-select v-model="state.queryForm.keyPoint" disabled multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
                      <el-option v-for="item in keypointsListData" :key="item.keyId" :label="item.keyPoint" :value="item.keyPoint"/>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="mb20" >
                  <el-form-item label="题干" prop="stem" :rules="[{ required: true, message: '请输入题干',trigger: 'change',}]" >
                    <el-input placeholder="请输入题干" disabled v-model="state.queryForm.stem" clearable   size="medium"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6" class="mb20">
                  <el-form-item label="题型" prop="questionType" :rules="[{ required: true, message: '请选择题型',trigger: 'change',}]">
                    <el-select v-model="state.queryForm.questionType"  placeholder="请选择题型" @change="handleChange" clearable>
                      <el-option :label="item.label" :value="item.value" v-for="(item, index) in tkgl_topic_type" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 单选 -->
                <el-col :span="15" class="mb20"  v-if="state.queryForm.questionType == 'radio'">
                  <!--   A    -->
                  <div class="option">
                    <el-form-item label="A" prop="optionA" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionA" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-radio v-model="answer" label="A" disabled>设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                  <!--   B  -->
                  <div class="option">
                    <el-form-item label="B" prop="optionB" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionB" clearable />
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer" disabled>
                      <el-radio v-model="answer" label="B" disabled>设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                  <!--   C  -->
                  <div class="option">
                    <el-form-item label="C" prop="optionC" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionC" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-radio v-model="answer" label="C" disabled>设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                  <!--  D  -->
                  <div class="option">
                    <el-form-item label="D" prop="optionD" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionD" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-radio v-model="answer" label="D" disabled>设为正确答案</el-radio>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- 多选 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'multi'">
                  <!--   A    -->
                  <div class="option">
                    <el-form-item label="A" prop="optionA" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionA" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="state.queryForm.answer" label="A" size="large" disabled>设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                  <!--   B  -->
                  <div class="option">
                    <el-form-item label="B" prop="optionB" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionB" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="state.queryForm.answer" label="B" size="large" disabled>设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                  <!--   C  -->
                  <div class="option">
                    <el-form-item label="C" prop="optionC" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionC" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="state.queryForm.answer" label="C" size="large" disabled>设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                  <!--  D  -->
                  <div class="option">
                    <el-form-item label="D" prop="optionD" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                      <el-input placeholder="请输入" v-model="state.queryForm.optionD" clearable disabled/>
                    </el-form-item>
                    <el-form-item  prop="answer" class="answer">
                      <el-checkbox v-model="state.queryForm.answer" label="D" size="large" disabled>设为正确答案</el-checkbox>
                    </el-form-item>
                  </div>
                </el-col>
                <!-- 填空 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'fill'">
                  <el-form-item label="答案" prop="answer" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                    <el-input placeholder="请输入答案" v-model="state.queryForm.answer" clearable disabled/>
                  </el-form-item>
                </el-col>
                <!-- 判断 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType =='judge'">
                  <el-form-item  prop="answer"  :rules="[{ required: true, message: '请判断',trigger: 'change',}]">
                    <el-radio-group v-model="answer" class="ml-4" disabled>
                      <el-radio label="1" size="large">对</el-radio>
                      <el-radio label="2" size="large">错</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 简答 -->
                <el-col :span="24" class="mb20" v-else-if="state.queryForm.questionType == 'answer'" >
                  <el-form-item label="答案" prop="answer" :rules="[{ required: true, message: '请输入',trigger: 'change',}]">
                    <el-input placeholder="请输入答案" v-model="state.queryForm.answer" clearable type="textarea" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="20" class="mb20">
                  <el-form-item label="解析" prop="readouts">
                    <el-input  v-model="state.queryForm.readouts" style="margin: 10px 0" clearable maxlength="600" type="textarea"/>
                  </el-form-item>
                  <el-button type="primary" style="margin-left: 750px">确定</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>

        <el-col :span="8" class="mb" >
          <el-card style="margin: 0 10px 20px 0px">
            <el-input  v-model="state.queryForm.readouts" clearable maxlength="300" type="textarea" />
          </el-card>

        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts" name="systemKszlTestQuestion">
  //导入
  import { BasicTableProps, useTable } from "/@/hooks/table";
  import { useMessage, useMessageBox } from "/@/hooks/message";
  import { useDict } from '/@/hooks/dict';
  import {useRoute, useRouter} from 'vue-router';
  import { Session } from '/@/utils/storage';
  import type { UploadProps, UploadUserFile } from 'element-plus'
  import {ref} from "vue";
  import mittBus from '/@/utils/mitt';
  import { fetchList, delObjs, putObj, uploadSysFile, uploadSysFileData, fileSubmit } from "/@/api/train/kszlFile";
  import {keypointsList} from "/@/api/train/jnglKeyPoints";
  import {deptTree, getEditList, syspost} from "/@/api/train/kszlData";
  import {getLevel, professionalnameList} from "/@/api/train/jnglProfessionLevel";
  import {saveProfession} from "/@/api/train/kszlFile";

  // 引入组件
  const FormDialog = defineAsyncComponent(() => import('./form.vue'));
  // 定义查询字典
  const { tkgl_topic_type } = useDict('tkgl_topic_type')
  //新增
  const pointsformlist = ref();
  // 定义变量内容
  const formDialogRef = ref()
  // 搜索变量
  const queryRef = ref()
  const showSearch = ref(true)
  // 多选变量
  const selectObjs = ref([]) as any
  const multiple = ref(true)
  const answer = ref('A')
  // const answer = ref(['A'])
  //弹框显示
  const dialogVisible = ref(false)
  const centerDialogVisible = ref(false)
  const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: fetchList
  })
  // 表单元素
  const dom = ref()
  const studyGroup = ref()
  // 校验规则
  const rules = ref({
    name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  })
  // 绑定数据
  const form = reactive({
    name: '',
    textarea:''
  })
  //新增弹框表单
  let keypointsform = reactive({
    keyId: "",
    zymcId: "",
    zydjId: "",
    keyPoint: "",
    remark: "",
    zymcName: "",
    zydjName: ""
  })
  //  table hook
  const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
  } = useTable(state)
  //返回上一页
  const router = useRouter();
  const goBack = () => {
    // router.go(-1);
    router.push('/train/tkglQuestionList/index');
  };
  //学习组织数据
  const options1 = ref<any[]>([]);
  //专业名称数据
  const options2 =reactive([{}])
  //fileTableList
  const fileTableList = reactive([{}])
  //专业等级
  const zydjnamelist = reactive([{}])
  //测试数据-------保存数据
  const allList = reactive([{
    "state": 0,
    "studyGroup": "qq",
    "studyPosts": ['qqq','qqq'],
    "majorName": "www",
    "keyPoints": ['ee','eee'],
    "studyGroupId": "1",
    "studyPostIds": ['1','2'],
    "majorNameId": "3",
    "keyPointIds": ['4','5'],
    "fileIds": ['23','19'],
    "originFileName": "哇阿达瓦.doc"

  }])
  const route = useRoute();
  const dataList =reactive([{}])
  //学习岗位
  const postList =reactive([{}])
  //关键点
  const keypointsListData = reactive([{}])
  //部门主键
  const pkDept = ref()
  //挂载完毕
  onMounted(()=>{
    // console.log(route.query.sendId) // 输出 "value1"
    const id = route.query.sendId
    const params = `dataFileId=${id}`;
    // console.log('params----',params)
    dataList.length = 0
    getEditList(params).then((res)=>{
      Object.assign(dataList, res.data.data)
      console.log('dataList',dataList,dataList.length)
    })
    // 绑定事件
    mittBus.on('sendData',(value:any)=>{
      console.log('sendData事件被触发',value)
      const id = value
      if(id){
        getEditList(23).then((res)=>{
          console.log('sendId111111',res)
          // Object.assign(state.dataList, res.data.records)
          // console.log('sendId',res.data)
        })
      }else {

        // Object.assign(state.dataList, {})
      }

    })
    deptTreeList()
    getProfessionalName()
    getKeypointsList()
    // handleSelectChange()

  })
  // onUnmounted(()=>{
  //     // 解绑事件
  //     mittBus.off('sendData')
  // })


  // 参与组织
  const deptTreeList = () => {
    deptTree().then((res) => {
      options1.value = res.data;
      // console.log('111、、、',options1.value)
    });
  };
  //专业名称
  const  getProfessionalName = () => {
    professionalnameList().then((res) => {
      Object.assign(options2, res.data)
      console.log("专业名称",options2);
    });
  };
  //
  // const handleSelectChange = () => {
  //   if(state.queryForm.questionType=='单选题'){
  //     console.log(state.queryForm.questionType,'单选');
  //     return true
  //   }else if(state.queryForm.questionType=='单选题'){
  //
  //   }
  // }
  //关键点
  const  getKeypointsList = () =>{
    keypointsList().then((res: any) => {
      Object.assign(keypointsListData, res.data.records)
      console.log('keypointsListData----', keypointsListData)
    });
  }
  const handleChange = (value) =>{
    console.log(value,'选中的值');
    if (value='multi' ){

    }
  }
  //拿到树节点id
  const treeHandleChange = (value:any) => {
    // value为选中节点数据
    pkDept.value = value.id
    studyGroup.value = value.name
    console.log(value,'00000')
    getPostList()
  }
  //学习岗位
  const getPostList =  () =>{
    const num = pkDept.value
    syspost(num).then((res: any) => {
      Object.assign(postList, res.data)
      // console.log('----',res.data)
    });
  }
  //修改表格单元格
  const changeHandle = (currentRow:any)=>{
    putObj(currentRow).then((res)=>{
      // console.log('--111',res)
    })
  }
  // 清空搜索条件
  const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    // 清空多选
    selectObjs.value = []
    getDataList()
  }
  // 多选事件
  const selectionChangHandle = (objs: { id: string }[]) => {
    selectObjs.value = objs.map(({ id }) => id);
    multiple.value = !objs.length;
  };
  // 删除操作
  const handleDelete = async (ids: string[]) => {
    try {
      await useMessageBox().confirm('此操作将永久删除');
    } catch {
      return;
    }

    try {
      await delObjs(ids);
      getDataList();
      useMessage().success('删除成功');
    } catch (err: any) {
      useMessage().error(err.msg);
    }
  };
</script>
<style lang="scss" scoped>
  .my-heading {
    color: black;
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 10px;
  }
  .el-form{
    margin-left: 15px;
  }
  .option{
    display: flex;
  }
  .answer{
    margin: -15px 0 0 30px
  }
  .line{
    border-top: 1px dashed #817B7B;
    width: 1000px;
    height: 0;
    margin-top: 10px;
    margin-left: -5px
  }
</style>
